<script setup lang="ts">
import { ref } from "vue";
import { useI18n } from 'vue-i18n';

import { PureTableBar } from "@/components/RePureTableBar";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import { useLogic } from "./logic/logic";
import { Permiss } from "./logic/types";
import { hasAuth } from "@/router/utils";

import {
  Search,
  Refresh,
  RefreshLeft,
  Plus,
  EditPen,
  Delete,
  Edit
} from "@element-plus/icons-vue";

const { t } = useI18n();

defineOptions({
  name: "dept-manage"
});

const tableRef = ref();
const queryFormRef = ref();

const {
  loading,
  dataList,
  columns,
  queryFormData,
  openDialog,
  onSearch,
  resetForm,
  handleDelete
} = useLogic();
</script>

<template>
  <div class="main">
    <el-form
      ref="queryFormRef"
      v-auth="Permiss.READ"
      :model="queryFormData"
      :inline="true"
      class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px]"
      @submit.prevent
    >
      <el-form-item :label="t('sys.deptPage.searchForm.name')" prop="name">
        <el-input
          v-model="queryFormData.search"
          :placeholder="t('sys.deptPage.searchForm.placeholder')"
          clearable
          class="!w-[200px]"
          @keyup.enter="onSearch"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :icon="Search" @click="onSearch">
          {{ t('sys.deptPage.buttons.search') }}
        </el-button>
        <el-button
          :icon="useRenderIcon(Refresh)"
          @click="resetForm(queryFormRef)"
        >
          {{ t('sys.deptPage.buttons.reset') }}
        </el-button>
      </el-form-item>
    </el-form>

    <PureTableBar
      :title="t('sys.deptPage.pageTitle')"
      :columns="columns()"
      :tableRef="tableRef?.getTableRef()"
      @refresh="onSearch"
    >
      <template #buttons>
        <el-button
          v-auth="Permiss.ADD"
          type="primary"
          :icon="Plus"
          @click="openDialog()"
        >
          {{ t('sys.deptPage.buttons.add') }}
        </el-button>
      </template>
      <template v-slot="{ size, dynamicColumns }">
        <pure-table
          ref="tableRef"
          adaptive
          :adaptiveConfig="{ offsetBottom: 32 }"
          align-whole="center"
          row-key="id"
          :empty-text="hasAuth(Permiss.READ) ? t('sys.deptPage.table.emptyText') : t('sys.deptPage.table.noAuth')"
          showOverflowTooltip
          table-layout="auto"
          default-expand-all
          :loading="loading"
          :size="size"
          :data="dataList"
          :columns="dynamicColumns"
          :header-cell-style="{
            background: 'var(--el-fill-color-light)',
            color: 'var(--el-text-color-primary)'
          }"
        >
          <template #operation="{ row }">
            <el-button
                v-auth="Permiss.ADD"
                class="reset-margin"
                link
                type="primary"
                :size="size"
                :icon="Plus"
                @click="
                  openDialog(t('sys.deptPage.buttons.addChild'), {
                    parentId: row.id
                  })
                "
              >
                {{ t('sys.deptPage.buttons.addChild') }}
              </el-button>
            <el-button
                v-auth="Permiss.UPT"
                class="reset-margin"
                link
                type="primary"
                :size="size"
                :icon="EditPen"
                @click="openDialog(t('sys.deptPage.buttons.edit'), row)"
              >
                {{ t('sys.deptPage.buttons.edit') }}
              </el-button>
            <Auth :value="Permiss.DEL">
                <el-popconfirm
                  :title="t('sys.deptPage.dialog.deleteConfirm', { name: row.name })"
                  @confirm="handleDelete(row)"
                >
                  <template #reference>
                    <el-button
                      class="reset-margin"
                      link
                      type="primary"
                      :size="size"
                      :icon="Delete"
                    >
                      {{ t('sys.deptPage.buttons.delete') }}
                    </el-button>
                  </template>
                </el-popconfirm>
              </Auth>
          </template>
        </pure-table>
      </template>
    </PureTableBar>
  </div>
</template>
